<template>
    <!-- <div id="myChart" class="charts-box" style="width: 100%;height: 420px;" /> -->
    <!-- <marquee vspace="30" hspace="30">jfjaj</marquee> -->
    <div>
      <div style="background: whitesmoke;padding-top: 0.25rem;height: 5rem;border: #85989C 0.125rem">
        <el-form :inline="true" :model="courseQueryVo" class="demo-form-inline" style="margin-left: 1%;">
          <el-form-item label="课程名称" size="mini">
            <el-input v-model="courseQueryVo.title" placeholder="课程名称"></el-input>
          </el-form-item>
          <el-form-item label="讲师名称" size="mini">
            <el-input v-model="courseQueryVo.teacherName" placeholder="讲师名称"></el-input>
          </el-form-item>
          <el-form-item label="价格区间" size="mini">
            <el-input v-model="courseQueryVo.startPrice" placeholder="最低价"></el-input>
          </el-form-item>
          <el-form-item size="mini">
            <el-input v-model="courseQueryVo.endPrice" placeholder="最高价"></el-input>
          </el-form-item>
          <el-form-item size="mini" style="width: 6.25rem;">
            <el-select v-model="courseQueryVo.isfree" placeholder="是否免费">
              <el-option label="免费" value="免费"></el-option>
              <el-option label="付费" value="付费"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item size="mini">
            <el-select v-model="courseQueryVo.isOnline" placeholder="状态" style="width: 5.75rem">
              <el-option label="已发布" value="Normal"></el-option>
              <el-option label="未发布" value="Draft"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item size="mini">
            <el-button icon="el-icon-search" type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
          <el-form-item size="mini">
            <el-button type="info" @click="resetx">重置</el-button>
          </el-form-item>
          <el-form-item label="课程分类" size="mini">
            <el-select v-model="subjectclassonetmp" placeholder="一级分类" @change="subjectonechange">
              <el-option v-for="(subjectclassone,index) in subjectclass" :key="subjectclass.id" :label="subjectclassone.title" :value="subjectclassone.title"></el-option>
            </el-select>
            <el-select v-model="courseQueryVo.subjectTwo" placeholder="二级分类" style="margin-left: 0.5rem">
              <el-option v-for="(subtwo,index) in subjectclasstwo" :label="subtwo.title" :value="subtwo.title"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="课程时间" size="mini">
              <el-col :span="11" size="mini">
                <el-form-item prop="date1" size="mini">
                  <el-date-picker type="date" placeholder="开课日期" v-model="courseQueryVo.startTime" style="width: 100%;"></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item prop="date2" size="mini">
                  <el-date-picker type="date" placeholder="结课日期" v-model="courseQueryVo.endTime" style="width: 100%;"></el-date-picker>
                </el-form-item>
              </el-col>
            </el-form-item>
            <el-form-item label="数据统计" size="mini">
                <el-col :span="11" size="mini">
                  <el-form-item prop="date1" size="mini">
                    <el-button @click="centerDialogVisibleonclick" size="mini" type="success" icon="el-icon-s-data">种类统计</el-button>
                  </el-form-item>
                </el-col>
              </el-form-item>
        </el-form>
      </div>
      <el-dialog
        title="课程数据统计"
        :visible.sync="centerDialogVisible"
        width="90%"
        height="90%"
        @open="open"
        center>
        <div id="bingchart" class="charts-box" style="width: 50%;height: 20rem;float: left;"></div>
        <div id="bingcharterji" class="charts-box" style="width: 50%;height: 20rem;float: right;"></div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>
      <!-- <div id="bingchart" class="charts-box" style="width: 13.75rem;height: 20rem"></div> -->
      <div>
        <el-table
            ref="multipleTable"
            :data="courselistInfoVod"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column
              type="selection"
              width="55">
            </el-table-column>
            <el-table-column
              align="center"
              label="课程名称"
              width="140">
              <template slot-scope="scope">{{ scope.row.title }}</template>
            </el-table-column>
            <el-table-column
              align="center"
              label="课程封面"
              width="110">
              <template slot-scope="scope">
                <img :src="scope.row.cover" style="width: 3.75rem;height: 3.75rem;" />
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="name"
              label="课程讲师"
              width="110">
              <template slot-scope="scope">{{scope.row.teacherName}}</template>
            </el-table-column>
            <el-table-column
              align="center"
              label="讲师头像"
              width="110">
              <template slot-scope="scope">
                <img :src="scope.row.avatar" style="width: 3.75rem;height: 3.75rem;" />
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="address"
              label="课程分类"
              width="120">
               <template slot-scope="scope">{{scope.row.subjectOne}}-{{scope.row.subjectTwo}}</template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="address"
              label="课程价格"
              width="100">
               <template slot-scope="scope">{{scope.row.isfree}}:{{scope.row.price}}</template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="address"
              label="课时数"
              width="70">
               <template slot-scope="scope">{{scope.row.lessonNum}}</template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="address"
              label="开课时间"
              width="120">
               <template slot-scope="scope" style="font-size: smaller;">{{scope.row.courseStartTime}}--{{scope.row.courseEndTime}}-<span>{{scope.row.isOnline=='Normal'?'已发布':'未发布'}}</span></template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="address"
              label="课程状态"
              width="78">
               <template slot-scope="scope" style="font-size: smaller;"><span>{{scope.row.isOnline=='Normal'?'已发布':'未发布'}}</span></template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="address"
              label="操作"
              show-overflow-tooltip>
               <template slot-scope="scope">
                <el-button @click="courseupdate(scope.row.id)"  size="mini" type="primary" plain>修改</el-button>
                <el-button @click="displaychapterinfo(scope.row.id)" size="mini" type="success" plain>详情</el-button>
                <!-- <el-button @click="displaychapterinfo" size="mini" type="success" plain>章节</el-button> -->
                <el-button @click="deleteCourse(scope.row.id)" size="mini" type="danger" plain>删除</el-button>
               </template>
            </el-table-column>
          </el-table>
          <!-- 页头 -->
          <div class="block">
              <el-pagination
                 style="margin-left: 35%;width: 50%;"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page"
                :page-sizes="[10, 15, 20, 30]"
                :page-size="limit"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
              </el-pagination>
            </div>
      </div>
      <!-- 操作中的按钮发起的弹窗 -->
      <el-dialog
        title="课程信息"
        :visible.sync="caozuoDialogVisible"
        width="80%"
        center>
        <CourseCardInfo :courseSubmitFinally="courseSubmitFinally" :free="free" :status="status"></CourseCardInfo>
        <span slot="footer" class="dialog-footer">
          <el-button @click="caozuoDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="caozuoDialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>

    </div>

</template>

<script>
  import subject from '@/api/edu/subject'
  import course from '@/api/edu/course'
  import CourseCardInfo from '../../../components/coursecomponents/CourseCardInfo'
export default {
  components: {'CourseCardInfo': CourseCardInfo },
  data(){
    return{
      //课程分类统计的数据
      courseclass: {},
      //课程详情弹出
      courseSubmitFinally: {},
      free: '',
      status: '',
      //操作框弹窗
      caozuoDialogVisible: false,
      //数据统计弹窗
      centerDialogVisible: false,
      //课程满足条件的个数
      total: '',
      //课程分类
      subjectclass: [],
      //课程二级分类
      subjectclasstwo: [],
      //二级分类回显辅助参数
      subjectclassonetmp: '',
      //查询用的条件
      courseQueryVo:{
              endPrice: '',
               endTime: '',
               isOnline: '',
               isfree: '',
               limit: 10,
               page: 1,
               startPrice: '',
               startTime: '',
               subjectOne: '',
               subjectTwo: '',
               teacherName: '',
               title: ''
                },
                page: 1,
                limit: 10,
      ruleForm: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
              },
      courselistInfoVo: [],
      //分页辅助
      displaycourselistInfoVo: [],
      //当前页
      courselistInfoVod: [],
      formInline: {
                user: '',
                region: ''
              },
              multipleSelection: []
    }
  },
  mounted(){
    // this.drawLine()
    // this.displaycourselistData()
  },
  created(){
    this.getcourseclasscpx()
    this.getsubjectinfo()
    course.courselist(this.courseQueryVo).then(reponse => {
      this.courselistInfoVo=reponse.data.courselistInfoVos.courselistInfoVo
      this.total=reponse.data.courselistInfoVos.total
      console.log('测试list的结果：',this.courselistInfoVo)
      this.handleSizeChange(10)
      this.handleCurrentChange(1)
    })


  },
    methods:{
      //课程的逻辑删除
      deleteCourse(courseid){
        //是否删除的确认
        this.$confirm('此操作将删除课程, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          course.deletecourseInfoLogic(courseid).then(response => {
            if(response.data.logicdelete==true){
              this.$message({
                type: 'success',
                message: '删除成功'
              })
            }else{
              this.$message({
                type: 'error',
                message: '删除失败'
              })
            }
            //list数据 统计数据  重新加载
            this.getcourseclasscpx()
            this.getsubjectinfo()
            course.courselist(this.courseQueryVo).then(reponse => {
              this.courselistInfoVo=reponse.data.courselistInfoVos.courselistInfoVo
              this.total=reponse.data.courselistInfoVos.total
              console.log('测试list的结果：',this.courselistInfoVo)
              this.handleSizeChange(10)
              this.handleCurrentChange(1)
            })
          })
        }).catch(() => {
          this.$message({
            type: 'warning',
            message: '已经取消删除'
          })
        })

      },
      // 课程分类的统计
      getcourseclasscpx(){
        course.courseclasscp().then(response => {
          this.courseclass=response.data.courseclass
        })
      },
      //课程修改
      courseupdate(courseid){
        this.$router.push({
          path: '/course/info/'+courseid
        })
      },
      //课程信息确认   回显信息
      displaychapterinfo(courseid){
        course.getcourseSubmitFinally(courseid).then(response => {
          this.courseSubmitFinally=response.data.courseSubmitFinally
          if(this.courseSubmitFinally.isfree==="免费"){
            this.free=false
          }
          if(this.courseSubmitFinally.isfree==="付费"){
            this.free=true
          }
          if(this.courseSubmitFinally.status==='Draft'){
            this.status=false
          }
          if(this.courseSubmitFinally.status==='Normal'){
            this.status=true
          }
        })
        this.caozuoDialogVisible=true
      },
      //点击章节 显示章节折叠版
      // displaychapterinfo(){
      //   this.caozuoDialogVisible=true
      // },
      //课程列表统计图 展示
      open() {
        console.log('测试弹窗中的echarts')
        const t = this;
          setTimeout(() => {
            //  执行echarts画图方法
            t.displaycourselistData()
          }, 0);
      },
      centerDialogVisibleonclick(){

        // this.displaycourselistData()
        this.centerDialogVisible=true
      },
      displaycourselistData(){
        var chartDom = document.getElementById('bingchart');
        var myChart = this.$echarts.init(chartDom);
        var option;
        this.$nextTick(() => {//自适应宽度

                myChart.resize();

        })
        option = {
          title: {
            text: '一级分类',
            subtext: '',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [
            {
              name: '一级分类',
              type: 'pie',
              radius: '50%',
              data: this.courseclass.courseclassoneCPS,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };

        option && myChart.setOption(option)
        // 二级分类的统计
        var chartDomerji = document.getElementById('bingcharterji');
        var myCharterji = this.$echarts.init(chartDomerji);
        var optionerji;
        this.$nextTick(() => {//自适应宽度

                myCharterji.resize();

        })
        optionerji = {
          title: {
            text: '二级分类',
            subtext: '',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [
            {
              name: '二级分类',
              type: 'pie',
              radius: '50%',
              data: this.courseclass.courseclasstwoCPS,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };

        optionerji && myCharterji.setOption(optionerji)
      },
      //获取结果
      getlist(){
        course.courselist(this.courseQueryVo).then(reponse => {
          this.courselistInfoVo=reponse.data.courselistInfoVos.courselistInfoVo
          this.total=reponse.data.courselistInfoVos.total
          console.log('测试list的结果：',this.courselistInfoVo)
          this.handleSizeChange(this.limit)
        })
      },
      //回显二级分类
      subjectonechange(){
        // console.log('测试选中的一级分类：',this.subjectclassonetmp)
        this.courseQueryVo.subjectTwo=''
        this.subjectclasstwo=[]
        for(var i=0;i<this.subjectclass.length;i++){
          if(this.subjectclassonetmp==this.subjectclass[i].title){
            // this.subjectclasstwo.push(this.subjectclass[i].children.title)
            this.subjectclasstwo=this.subjectclass[i].children
            // console.log('测试二级分类：',this.subjectclass[i].children)
          }
        }
      },
      //课程分类 下拉列表显示
      getsubjectinfo(){
        subject.getsubjectbytree().then(response => {
          this.subjectclass=response.data.data
          console.log('测试课程分类回显:',this.subjectclass)
        })
      },
      //重置
      resetx(){
        this.courseQueryVo.endPrice=''
        this.courseQueryVo.endTime=''
        this.courseQueryVo.isOnline=''
        this.courseQueryVo.isfree=''
        this.courseQueryVo.startPrice=''
        this.courseQueryVo.startTime=''
        this.courseQueryVo.subjectOne=''
        this.courseQueryVo.subjectTwo=''
        this.courseQueryVo.teacherName=''
        this.courseQueryVo.title='',
        this.subjectclassonetmp='',
        this.subjectclasstwo=[]
      },
      //分页
       handleSizeChange(val) {
         this.displaycourselistInfoVo=[]
         var tmp=[]
         var tmpt=[]
         let t=0
         let yu=this.courselistInfoVo.length%val
         let tt=this.courselistInfoVo.length-yu
         console.log('测试val:',this.courselistInfoVo.length)
         for(var i=0;i<this.courselistInfoVo.length;i++){
           console.log('跑了')
           tmp.push(this.courselistInfoVo[i])
           t+=1
           if(tmp.length==val){
             this.displaycourselistInfoVo.push(tmp)
             tmp=[]
             t=0
           }
         }
         for(let ii=tt;ii<this.courselistInfoVo.length;ii++){
           tmpt.push(this.courselistInfoVo[ii])
         }
         this.displaycourselistInfoVo.push(tmpt)
         tmpt=[]
         console.log('测试分页（每页的数据）：',this.displaycourselistInfoVo)
              console.log(`每页 ${val} 条`);
              this.handleCurrentChange(1)
            },
            handleCurrentChange(val) {
              this.page=val
              this.courselistInfoVod=[]
              this.courselistInfoVod=this.displaycourselistInfoVo[val-1]
              console.log(`当前页: ${val}`);

            },
            //
      onSubmit() {
        this.courseQueryVo.subjectOne=this.subjectclassonetmp
              console.log('测试提交的条件：',this.courseQueryVo);
              this.displaycourselistInfoVo=[]
              //当前页
              this.courselistInfoVod=[]

              this.getlist()

            },
      toggleSelection(rows) {
              if (rows) {
                rows.forEach(row => {
                  this.$refs.multipleTable.toggleRowSelection(row);
                });
              } else {
                this.$refs.multipleTable.clearSelection();
              }
            },
            handleSelectionChange(val) {
              this.multipleSelection = val;
            },
      drawLine() {
        // 基于准备好的dom，初始化echarts实例
        const myChart = this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption({
         title: { text: '浏览统计' }, // 为图表配置标题
          tooltip: {}, // 配置提示信息
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', '123', '456', '789', '111', '1231', '5555']
          }, // 配置要在 X 轴显示的项
          yAxis: {
            type: 'value'
          }, // 配置要在 Y 轴显示的项
          legend: {
            data: ['浏览量', '收藏量']
          }, // 图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示
          series: [
            {
              name: '浏览量', // 系列名称
              data: [820, 932, 901, 934, 1290, 1330, 1320, 1350, 1333, 2000, 100, 2500, 3333], // // 系列中的数据内容
              type: 'bar' ,// // 系列图表类型
              // marquee:{
              //   text:'jfajfjaj',
              //   vspace: '30',
              //    hspace: '30'
              // }
              label:{
                show: true,

                graphic: {//图形中间图片
                            elements: [{
                              type: "a",
                              formatter: 'nihao',
                            //   style: {
                            //     image: require("image/abc.png"),//你的图片地址
                            //     width: 80,
                            //     height: 80,
                            //   },
                            //   left: "center",
                            //   top: "center",
                            }],
                        }

              },
              },

            {
              name: '收藏量',
              data: [1000, 800, 3000, 93, 129, 133, 130, 135, 133, 200, 1000, 250],
              type: 'bar'
            }
          ] // 系列列表
        })
      }
    }

}
</script>
